import React, { memo, useCallback, useEffect, useState } from "react";
import { useHistory, withRouter } from "react-router-dom";
import { V_WIDTH, V_MIN_WIDTH } from "../../utils/config";
import MinAndMax from "@/components/MinAndMax";
import style from "./index.css";
import { connect } from 'react-redux'
import { toggleShowLoginBox } from "@/redux/actions";

import "./index.css";

const NavItem = memo(({ item, setCurrentNav, currentIndex }) => {
  const history = useHistory();

  const handleClick = useCallback(() => {
    if (currentIndex == item.id) {
      return;
    }
    history.push(item.path);
    setCurrentNav(item.id);
  }, [item, currentIndex]);

  return (
    <a className={style.itemLink} onClick={handleClick}>
      <div className={style.nItem}>
        <div
          className={["n-title", currentIndex == item.id ? "isHot" : ""].join(
            " "
          )}
        >
          {item.name}
        </div>
        {item.isHot ? (
          <>
            <img
              src="https://cdn1.chinayarn.com/dsc/2020-11/img/dAAGbphpuAjQsI1605516682201116.png"
              className={style.nHot}
              alt="hoticon"
            />
          </>
        ) : null}
        {currentIndex == item.id ? (
          <div className={style.disTop_jiantou_header}></div>
        ) : null}
      </div>
    </a>
  );
});

const SearchInput = () => {
  return (
    <div className={style.searchItem}>
      <img
        src="https://cdn1.chinayarn.com/dsc/2020-11/img/kXk3zphpoEfTbM1605519912201116.png"
        className={style.sIcon}
        alt="search-icon"
      />
      <input
        type="text"
        className={style.sInput}
        placeholder="音热/视频/电台/用户"
      />
    </div>
  );
};

const UserBox = () => {
  return <div>{null}</div>
}

function Header({toggleShowFun, isLogin, history}) {
  const [navList, setNavList] = useState([
    { id: 1, name: "发现音热", isHot: false, isOn: true, path: "/discover" },
    { id: 2, name: "我的音热", isHot: false, isOn: false, path: "/mine" },
    { id: 3, name: "朋友", isHot: false, isOn: false, path: "/friend" },
    { id: 4, name: "商城", isHot: false, isOn: false, path: "/shop" },
    { id: 5, name: "音热人", isHot: false, isOn: false, path: "/musician" },
    { id: 6, name: "下载客户端", isHot: true, isOn: false, path: "/download" },
    { id: 7, name: "404", isHot: false, isOn: false, path: "/404" },
  ]);
  const [currentIndex, setCurrentIndex] = useState(1);

  const setCurrentNav = (id) => {
    setCurrentIndex(id);
  };

  useEffect(() => {
    let path = history.location.pathname
    let item = navList.find(e => e.path == path)
    if (item) {
      setCurrentNav(item.id)
    }else{
      setCurrentNav(7)
    }
  }, [history.location.pathname])

  return (
    <>
      <MinAndMax bgc="#242424" isContainer={false}>
        <div className={style.headerContent}>
          <a href="/">
            <div className={style.hLogo}></div>
          </a>
          <div className={style.navLists}>
            {navList
              ? navList.map((item) => {
                if (item.id == 7) {
                  return null
                }else{
                  return <NavItem
                    item={item}
                    key={item.id}
                    currentIndex={currentIndex}
                    setCurrentNav={setCurrentNav}
                  />
                }
              })
              : null}
          </div>
          <SearchInput />
          <div className={style.createOr}>创作者中心</div>
          {isLogin ? <UserBox /> : <button className={style.loginBtn} onClick={toggleShowFun}>登录</button>}
        </div>
      </MinAndMax>
    </>
  );
}

const mapStatesToProps = (state) => {
  return {  
    isLogin: state.userinfo.isLogin
  }
}
const mapDispatchToProps = (dispatch) => {
  return {  
    toggleShowFun: () => {
      console.log('TOGGLE_SHOW_LOGINBOX')
      dispatch(toggleShowLoginBox());
    },
  }
}
export default connect(mapStatesToProps, mapDispatchToProps)(withRouter(Header))